<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="选择城市" :isAppBtn="false"></HeadCustom>
		<SearchCustom placeholder="搜索城市名/拼音" :keyword.sync="keyword" @search="serarchList" />
		<view class="scroll-wrap" :style="{height: scrollHeight +'px'}">
			<u-index-list ref="indexList" :index-list="indexList" :style="{height: scrollHeight +'px'}">
				<template v-if="!keyword">
					<u-index-item>
						<view class="position" v-if="fromData.expectCityName">
							<u-index-anchor text="定位城市" :bgColor="globalColor.controllerBgColor" color="#B6835C" size="30rpx"></u-index-anchor>
							<view class="list-cell">
								<view class="nav-item lh38 font-ell1 bg-21242C color-ACB4C7 font26">
									{{fromData.expectCityName}}
								</view>
							</view>
						</view>
					</u-index-item>
					<u-index-item>
						<view class="hot">
							<u-index-anchor text="热门城市" :bgColor="globalColor.controllerBgColor" color="#B6835C" size="30rpx"></u-index-anchor>
							<view class="list-cell fboxWrap mt16">
								<view class="nav-item lh38 font-ell1 bg-21242C color-ACB4C7 font26" v-for="(cell, index) in hotList" @click="cityClick(cell)">
									{{cell.areaName}}
								</view>
							</view>
						</view>
					</u-index-item>
				</template>
				<template v-for="(item, index) in itemArr">
					<u-index-item>
						<u-index-anchor :text="indexList[index]" :bgColor="globalColor.controllerBgColor" color="#B6835C" size="30rpx"></u-index-anchor>
						<view class="list-cell">
							<view class="fboxWrap mt16">
								<view class="nav-item lh38 font-ell1 bg-21242C color-ACB4C7 font26" v-for="(cell, index) in item.areaList" @click="cityClick(cell)">
									{{cell.areaName}}
								</view>
							</view>
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	import {sysAreaModuleList, jobHotCity} from '@/api/recruit.js';
	import SearchCustom from '@/components/search/search-custom.vue';
	export default {
		components:{SearchCustom},
		data() {
			return {
				theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
				keyword: '',
				itemArr: [],
				indexList:[],
				hotList: [],
				fromData: {
					"expectCityId": "",
					"expectCityName": "",
				},
				type: 'vita',
				scrollHeight: 0
			}
		},
		onLoad(option) {
			// uni.getSystemInfo({success:(sys)=>{
			// 	this.scrollHeight = sys.screenHeight - getApp().globalData.statusBarHeight - 88
			// }})
			if(option && option.type){
				this.type = option.type
			}
			this.getInit()
		},
		onReady() {
			uni.createSelectorQuery(this)
				.selectAll('.scroll-wrap')
				.boundingClientRect(res => {
					console.log('scroll-wrap', res)
					uni.getSystemInfo({
						success: sys => {
							const {screenHeight, windowHeight} = sys
							let h = screenHeight- res[0].top
							
							console.log(h)
							this.scrollHeight = h
							this.$refs.indexList.scrollViewHeight = h+'px'
							// #ifdef MP
							this.$refs.indexList.scrollViewHeight = (h-40)+'px'
							// #endif
						}
					});
				})
				.exec();
		},
		methods: {
			getInit(){
				if(this.type == 'filter'){
					const filterTemp = getApp().globalData.filterTemp
					if(filterTemp.hasOwnProperty('expectCityName')){
						this.fromData = filterTemp
					}
				}else{
					const vitaTemp = getApp().globalData.vitaTemp
					if(vitaTemp.hasOwnProperty('expectCityName')){
						this.fromData = vitaTemp
					}
				}
				jobHotCity().then(res=>{
					this.hotList = res.data
				})
				this.getList()
			},
			getList(){
				this.indexList = []
				sysAreaModuleList({areaName: this.keyword }).then(res=>{
					this.itemArr = res.data
					res.data.filter(item=>{
						this.indexList.push(item.firstLetter)
					})
				})
			},
			serarchList(){
				this.getList()
			},
			cityClick(item){
				if(this.type == 'filter'){
					getApp().globalData.filterTemp.expectCityId = item.areaCode
					getApp().globalData.filterTemp.expectCityName = item.areaName
				}else{
					getApp().globalData.vitaTemp.expectCityId = item.areaCode
					getApp().globalData.vitaTemp.expectCityName = item.areaName
				}
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{height: calc(100vh);overflow: hidden;}
	.scroll-wrap{padding: 48rpx 0 54rpx 0;}
	.scroll-wrap /deep/ .u-border-bottom{border: none;}
	.nav-item{ margin: 16rpx 16rpx 0 0; padding: 0 24rpx;width: 212rpx;height: 72rpx; line-height: 72rpx;text-align: center; border-radius: 8rpx;}
	.list-cell{padding: 0 0 20rpx 40rpx;}
	.max-index{position: absolute;right: 0;top: -54rpx;display: none;
		width: 152rpx;height: 140rpx;
		background: url('https://ebc-prod.cdn.benwunet.com/uni-static/workplace/icon-index.png');background-size:152rpx 140rpx;
	}
	.scroll-wrap /deep/ .uni-scroll-view{height: calc(80vh);}
	
</style>
